<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo nav-menu"
    mode="horizontal"
    @select="handleSelect"
  >

    <el-menu-item index="0" @click="$router.push('/')">
      <img
        style="height: 55px; width: auto; object-fit: contain;"
        src="@/assets/images/logo.png"
        alt="Element logo"
    /></el-menu-item>
    <el-sub-menu index="1">
      <template #title>心理服务</template>
      <el-menu-item index="1-1">心理咨询</el-menu-item>
    <el-menu-item index="1-2" @click="goToTest">心理测试</el-menu-item>
    <el-menu-item index="1-3" @click="goToCourses">心理课程</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>问答社区</template>
      <el-menu-item index="2-1" @click="goToArticles">文章</el-menu-item>
      <el-menu-item index="2-2" @click="goToQuestions">问答</el-menu-item>
    </el-sub-menu>
    
    <el-menu-item index="3" @click="goToCounselor">加入我们</el-menu-item>

    <!-- 用户已登录时显示个人中心菜单 -->
    <el-sub-menu v-if="userStore.loading" index="4" class="user-avatar-menu">
      <template #title>
  <img :src="userAvatar" alt="User Avatar" class="avatar-img" />
      </template>
      
      <el-menu-item index="4-1">
        <RouterLink to="/orders">我的订单</RouterLink>
      </el-menu-item>
      <el-menu-item index="4-2">
        <RouterLink to="/account">账户余额</RouterLink>
      </el-menu-item>
      <el-menu-item index="4-3">
        <RouterLink to="/user-center">个人中心</RouterLink>
      </el-menu-item>
      <el-menu-item index="4-4" @click="handleLogout">
        退出登录
      </el-menu-item>
    </el-sub-menu>

    <!-- 用户未登录时显示登录注册按钮 -->
    <div v-else class="auth-buttons">
      <el-button type="primary" size="small" @click="goToLogin" class="login-btn">
        登录
      </el-button>
      <el-button size="small" @click="goToRegister" class="register-btn">
        注册
      </el-button>
    </div>

  </el-menu>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { RouterLink, useRouter } from 'vue-router'
  import { useUserStore } from '../stores/auth/user'

  type UserStore = ReturnType<typeof useUserStore> & {
    logout: () => Promise<void>
  }

  const userStore = useUserStore() as UserStore
  // @ts-ignore 使用 Vite 资源 URL 语法
  const userAvatar = new URL('../assets/images/user.svg', import.meta.url).href
  const router = useRouter()
  
  const activeIndex = ref('1')
  const activeIndex2 = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  // 跳转到登录页面
  const goToLogin = () => {
    router.push('/login')
  }

  // 跳转到注册页面
  const goToRegister = () => {
    router.push('/register')
  }

  const goToCourses = () => {
    router.push('/courses')
  }

  const goToTest=()=>{
    router.push('/courses')
  }

  const goToCounselor = () => {
    console.log('Navigating to counselor page')
    router.push('/counselors')
  }

  const goToArticles = () => {
    router.push('/articles')
  }

const goToQuestions = () => {
    router.push('/questions')
  }
  // 处理退出登录
  const handleLogout = async () => {
    try {
      await userStore.logout()
      router.push('/')
    } catch (error) {
      console.error('退出登录失败:', error)
    }
  }
</script>

<style scoped>
.avatar-container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-menu {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  position: relative;
  overflow: visible !important;
  height: 60px; /* 明确设置导航栏高度 */
}

:deep(.user-avatar-menu) {
  position: absolute !important;
  right: 20px !important;
  top: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100;
}

.auth-buttons {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.login-btn {
  margin-right: 8px;
}

.register-btn {
  background: transparent;
  border-color: #409eff;
  color: #409eff;
}

.register-btn:hover {
  background: #409eff;
  color: white;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
</style>